<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>金安物业票据打印</title>

		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>


		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>

	</head>
	<body >
		<!-- <div class="topicon">
			<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
					class="layui-icon layui-icon-print"></i></div>
		</div> -->
		<div id="app" >
			<div class="topicon">
				<button  title="打印" @click="printHtml" >打印</button>
			</div>

			<div id="printMy" style="width: 19.3cm;height: 10.5cm;"  >
				<!--缴费日期-->
				<div style="margin-top: 2cm;margin-left: 4.6cm;">{{formData.mapmine.sj}}</div>

				<!--客户姓名+房号-->
				<div style="display: inline-block;margin-left: 4.7cm;margin-top: 0.3cm;width: 7.4cm;">{{formData.mapzh.name}}</div>
				<div style="display: inline-block;margin-left: 0.4cm;margin-top: 0.3cm;">{{formData.mapfj.xqmc}} {{formData.mapfj.ldmc}} {{formData.mapfj.dymc}} {{formData.mapfj.name}} </div>

				<!--收款内容-->
				<div style="margin-left: 4.2cm;height: 3.4cm;margin-top: 0.5cm;">
					<div v-for="(item,index) in formData.listmx">
						{{item.sfxm}} {{item.jkqj}} {{item.fee}}
					</div>
					<div>{{formData.mapmine.bz}}</div>
				</div>

				<!--合计大写-->
				<div style="margin-left: 6.6cm;width: 7.4cm;display: inline-block;margin-bottom: 0.5cm;">{{formData.mapmine.sumfee_chine}}</div>
				<div style="display: inline-block;margin-bottom: 0.4cm;">{{formData.mapmine.sumfee}}</div>

				<!--缴款人-->
				<div>
					<div style="margin-left: 4.3cm;height: 0.7cm;display: inline-block;width: 3.13cm;font-size: 0.34cm;">0997-6162111</div>
					<div style="height: 0.7cm;display: inline-block;width: 3.13cm;"></div>
					<div style="height: 0.7cm;display: inline-block;width: 3.13cm;"></div>
					<div style="height: 0.7cm;display: inline-block;width: 3.13cm;">{{formData.mapmine.czr}}</div>

				</div>
			</div>


		</div>


		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					parmsData:{},
					formData:{},
					colName:"缴费期间",
					isshowgz:false,//是否显示公章
				},
				created(){
					this.parmsData = getParams();
					this.getData();
				},
				methods: {
					printHtml(){
						$("#printMy").print();
					},
					async getData(){
						let tableId = getTableId("704");
						const res = await postWebCustom(tableId,{jkbh:this.parmsData.id});
						if(res.code == 0){
							top.alert(res.msg);
							return;
						}
						if(res.msg == "1"){
							if(res.data.pdfUrl!=""){
								window.location.href = res.data.pdfUrl;
							}else {
								top.alert(res.data.statusMsg+","+res.data.failCause);
							}
						}
						if(res.msg == "2"){
							this.formData = res.data;
						}

					}
				},

			})
		</script>
	</body>
</html>
